<!doctype html>
<html lang="zh-CN">

<head>
    <title>
        
        #if(C.get('language')=='ch')
            留言板
        #else
            Message Board
        #end
        
    </title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" type="image/x-ico" href="favicon.ico" />
    <!-- Bootstrap CSS -->
    
    #if(C.get('language')=='ch')
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    #else
    <link rel="stylesheet" href="en/css/bootstrap.min.css">
    <link rel="stylesheet" href="en/css/all.min.css">
    <link rel="stylesheet" href="en/css/style.min.css">
    #end
    
    <link rel="stylesheet" href="#(CPATH)/static/components/jquery-file-upload/css/jquery.fileupload.css">
    <style>
        .myPanel {
            font-size: 25px;
            color: #ccc;
            text-align: center;
        }
        .red{color: brown;}
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="#(CPATH)/static/components/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.fileupload.js"></script>
</head>

<body>
    <div class="flex-container">
        <nav class="nav top-nav">
            <div class="container">
                <div class="row">
                    #include("language.html")
                </div>
            </div>
        </nav>
        <header class="masthead mb-auto">
            <div class="inner logo">
                <div class="webtitle">
                    <div class="title-h3 masthead-brand">国产飞机运营伙伴当局信息系统</div>
                    <div class="title-h4">Platform among CAAC MOU Partners for China-Made Aircraft</div>
                </div>
                 #if(C.get('language')=='ch')
                    #include("mainnav.html")
                #else
                    #include("mainnav_en.html")
                #end
                
                <div class="search-form">
                    #include("searchhead.html")
                </div>
            </div>
            
            #if(C.get('language')=='ch')
                #include("menu.html")
            #else
                #include("menu_en.html")
            #end
        </header>
        <div class="container">
            <nav class="breadcrumb">
                <a class="breadcrumb-item" href="/">
                    #if(C.get('language')=='ch')
                        首页
                    #else
                        Home
                    #end
                </a>
                <span class="breadcrumb-item active">
                    #if(C.get('language')=='ch')
                        留言板
                    #else
                        Message Board
                    #end
                </span>
            </nav>
            <div class="row">
                <div class="col-md-10 col-sm-12 left-list">
                    <div class="msg-title">
                        <a href="javascript:showmodal1();">
                        <i class="fas fa-pen-fancy"></i>
                        #if(C.get('language')=='ch')
                            发布留言
                        #else
                            Post a message
                        #end
                        </a>
                        #if(C.get('language')=='ch')
                            留言板
                        #else
                            Message Board
                        #end
                    </div>
                    <form class="msg-form">
                        <input type="hidden" name = "language" value="#(C.get('language'))">
                        <div class="row justify-content-md-center">
                            <div class="col-md-8 mb-3 input-group">
                                <input type="text" class="form-control" id="keyword" name="keyword" required style="height:40px">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="submit">
                                        #if(C.get('language')=='ch')
                                            搜索
                                        #else
                                            Search
                                        #end
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                    #categories(parentId=22)
                    <div class="msg-list mt-3 mb-3 p-3">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        #for(categorie : categories)
                        <li class="nav-item">
                        <a class="nav-link #if(for.index==0) active #end" id="head-#(categorie.id)" data-toggle="tab" href="#tab-#(categorie.id)" role="tab" aria-controls="#(categorie.title)" aria-selected=" #if(for.index==0) true #else false #end">
                            #if(C.get('language')=='ch')
                                #(categorie.title.split(',')[0] ??)
                            #else
                                #(categorie.title.split(',')[1] ??)
                            #end
                        </a>
                        </li>
                        #end
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        #for(categorie : categories)
                            <div class="tab-pane fade #if(for.index==0) show active #end" id="tab-#(categorie.id)" role="tabpanel" aria-labelledby="head-#(categorie.id)">
                                <ul class="list-group list-group-flush">
                                    #articlePage(pageSize=3,categoryId=categorie.id)
                                    #for(entity:articlePage.list)
                                    <li class="list-group-item"><a href="#(entity.url)">#(entity.title ??)</a></li>
                                    #end
                                    #end    
                                </ul>
                            </div>
                        #end
                    </div>
                    </div>
                    #end
                    
                    #interactList()
                    <dl class="msg-list mt-3 mb-3 p-3">
                        #for(entity:interactList.list)
                        <div class="jumbotron jumbotron-fluid" style="background-color: #f8f9fa;">
                          <div class="container">
                            <dt>
                                <span>
                                    #if(C.get('language')=='ch')
                                        咨询：
                                    #else
                                        Consultation :
                                    #end
                                </span>
                                <span>#(entity.user.nickname ??)</span>
                                <span class="date">
                                    #if(C.get('language')=='ch')
                                    #date(entity.create_time, "yyyy-MM-dd")
                                    #else
                                    #date(entity.create_time, "dd-MM-yyyy")
                                    #end
                                </span>
                                <p>#(entity.title ??)</p>
                            </dt>
                            #interactCommentList(pageSize=2,interact_id=entity.id)
                            #for(centity:interactCommentList.list)
                            <dd>
                                <span>
                                    #if(C.get('language')=='ch')
                                        回复：
                                    #else
                                        Reply:
                                    #end
                                </span>
                                <span>#(centity.user.nickname ??)</span>
                                <span class="date">#date(centity.create_time, "yyyy-MM-dd HH:ss")</span>
                                <p>#maxLength(centity.content,100,"...")</p>
                                <p style="color: blue">
                                    附件: 
                                    
                                    #if(centity.attachment)
                                    <a href="#(centity.attachment ??)">下载附件</a>
                                    #else
                                    暂无附件
                                    #end
                                </p>
                            </dd>
                            #end
                            #end
                            <div style="text-align: right">
                                <button type="button" class="btn btn-primary" onclick="showmodal(#(entity.id));">
                                    #if(C.get('language')=='ch')
                                        回复
                                    #else
                                        Reply
                                    #end
                                </button>
                                <a href="/interactCommentList/index?interact_id=#(entity.id)&language=#(C.get('language'))">
                                    <button type="button" class="btn btn-info">
                                        #if(C.get('language')=='ch')
                                            详情
                                        #else
                                            Details
                                        #end
                                    </button>
                                </a>
                            </div>
                          </div>
                        </div>
                        #end
                    </dl>
                    
                    #if(C.get('language')=='ch')
                    
                    <!--分页代码-->
                    #interactListPaginate()
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center ">
                            #for(page : pages)
                            <li class="page-item #(page.style ??)">
                                <a class="page-link" href="#(page.url ??)">
                                    #(page.text ??)
                                </a>
                            </li>
                            #end
                        </ul>
                    </nav>
                    #end
                       
                    #else
                        
                    <!--分页代码-->
                    #articlePaginate()
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center ">
                            #for(page : pages)
                            <li class="page-item #(page.style ??)">
                                <a class="page-link" href="#(page.url ??)">
                                    #if(page.text == "上一页")
                                    Previous page
                                    #elseif(page.text == "下一页")
                                    next page
                                    #else
                                    #(page.text)
                                    #end
                                </a>
                            </li>
                            #end
                        </ul>
                    </nav>
                    #end
                    
                    #end
                    
                    
                    
                    #end
                </div>
                <div class="col-md-2 col-sm-12 right-bar">
                    <div class="list-title orfont w-100">
                        #if(C.get('language')=='ch')
                            留言咨询使用流程
                        #else
                            Step
                        #end
                    </div>
                    <ul class="step">
                        <li>
                            <i></i>
                            <span>
                                #if(C.get('language')=='ch')
                                    搜索答案
                                #else
                                    Search Answer
                                #end
                            </span>
                        </li>
                        <li>
                            <i class="m-step02"></i>
                            <span>
                                #if(C.get('language')=='ch')
                                    查看结果
                                #else
                                    View Results
                                #end
                            </span>
                        </li>
                        <li>
                            <i class="m-step03"></i>
                            <span>
                                #if(C.get('language')=='ch')
                                    未找到满意答案
                                #else
                                    No satisfactory answer found
                                #end
                            </span>
                        </li>
                        <li>
                            <i class="m-step04"></i>
                            <span>
                                #if(C.get('language')=='ch')
                                    提问
                                #else
                                    Put questions to
                                #end
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
 #include("bottom.html")
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        
        function showmodal (id){
             $("#interactid").val(id);
             $('#exampleModal').modal('show');
        }
        
        function showmodal1 (){
             $('#exampleModal1').modal('show');
        }
        
        function submit(){
            
            var url = "/interactSubmission/doSaveInteractComment";
            var data = {
                interactid:$("#interactid").val(),
                name:$("#name").val(),
                phonenumber:$("#phonenumber").val(),
                email:$("#email").val(),
                content:$("#content").val(),
                attachment:$("#attachment").val()
            }
            $.post(url,data,function(e){
                
                if(e.state=="ok"){
                    $('#exampleModal').modal('hide');
                }else{
                    alert(e.msg_ch);
                }
                
            });
            
        }
            
        function submitinteract(){
            
            var url = "/interactSubmission/doSaveInteract";
            var data = {
                name:$("#name1").val(),
                phonenumber:$("#phonenumber1").val(),
                email:$("#email1").val(),
                title:$("#title1").val(),
                content:$("#content1").val(),
                attachment:$("#attachment2").val()
            }
            $.post(url,data,function(e){
                
                if(e.state=="ok"){
                    $('#exampleModal1').modal('hide');
                }else{
                    alert(e.msg_ch);
                }
                
            });
            
        }
    </script>
    <!-- 回复留言 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
                #if(C.get('language')=='ch')
                    回复面板
                #else
                    Reply panel
                #end
            </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <input type="hidden" id="interactid" name="interactid"/>
            <div class="form-group">
                <label>
                #if(C.get('language')=='ch')
                    姓名
                #else
                    Name
                #end
                <span class="red">*</span>
                </label>
                <input type="text" class="form-control" id="name" name="name" required="required">
            </div>
            <div class="form-group">
                <label>
                #if(C.get('language')=='ch')
                    电话
                #else
                    Phone Number
                #end
                <span class="red">*</span>
                </label>
                <input type="text" class="form-control" id="phonenumber" name="phonenumber" required="required">
            </div>
            <div class="form-group">
                <label>
                #if(C.get('language')=='ch')
                    邮箱
                #else
                    Email
                #end
                <span class="red">*</span>
                </label>
                <input type="text" class="form-control" id="email" name="email" required="required">
            </div>
            <div class="form-group">
               
                <a id="attachments-a" href="">
                    
                #if(C.get('language')=='ch')
                    下载附件
                #else
                    Download attachments
                #end
                    
                </a>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">
                #if(C.get('language')=='ch')
                    附件
                #else
                    Enclosure
                #end
                </label>
                <input id="attachment" type="hidden" name="attachment"/>
                <div id="uploader">
                    <span class="btn btn-block btn-primary fileinput-button" style="width: 120px">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>
                            #if(C.get('language')=='ch')
                                选择文件...
                            #else
                                Select File...
                            #end
                        </span>
                        <input id="cfile" type="file" name="files[]" multiple>
                    </span>
                    <div class="myPanel">
                        #if(C.get('language')=='ch')
                            或者拖动文件到这里进行上传...
                        #else
                            Or drag the file here to upload...
                        #end
                    </div>
                    <div style="color: #ccc;">
                        #if(C.get('language')=='ch')
                            支持所有文本文件
                        #else
                            Support for all text files
                        #end
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">
                #if(C.get('language')=='ch')
                    回复内容
                #else
                    Reply content...
                #end
                <span class="red">*</span>
                </label>
                <textarea maxlength='1000' class="form-control" rows="5" id="content" name="content" required="required"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                #if(C.get('language')=='ch')
                    关闭
                #else
                    Close
                #end
            </button>
            <button type="button" class="btn btn-primary" onclick="submit();">
                #if(C.get('language')=='ch')
                    提交
                #else
                    Submit
                #end
            </button>
          </div>
          <div class="modal-footer">
                #if(C.get('language')=='ch')
                提示：
                #else
                Note：
                #end
                <br/>
                <span style="color: #17a2b8;">
                    #if(C.get('language')=='ch')
                        留言最多为1000个字.
                    #else
                         Please limit your description to 1000 characters
                    #end
                </span>
            </div>
        </div>
      </div>
    </div>
    
    <!-- 发布留言 -->
    <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">
                #if(C.get('language')=='ch')
                    发布留言
                #else
                    Post a message
                #end
            </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
                <label>
                    
                #if(C.get('language')=='ch')
                    姓名
                #else
                    Name
                #end
                    <span class="red">*</span>
                </label>
                <input type="text" class="form-control" id="name1" name="name" required="required">
            </div>
            <div class="form-group">
                <label>
                #if(C.get('language')=='ch')
                    电话
                #else
                    Phone Number
                #end
                <span class="red">*</span>
                </label>
                <input type="text" class="form-control" id="phonenumber1" name="phonenumber" required="required">
            </div>
            <div class="form-group">
                <label>
                #if(C.get('language')=='ch')
                    邮箱
                #else
                    Email
                #end
                <span class="red">*</span>
                </label>
                <input type="text" class="form-control" id="email1" name="email" required="required">
            </div>
            <div class="form-group">
                <label>
                    
                #if(C.get('language')=='ch')
                    标题
                #else
                    Title
                #end
                    
                </label>
                <input type="text" class="form-control" id="title1" name="title">
            </div>
            <div class="form-group">
               
                <a id="attachments2-a" href="">
                    
                #if(C.get('language')=='ch')
                    下载附件
                #else
                    Download attachments
                #end
                    
                </a>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    
                #if(C.get('language')=='ch')
                    附件
                #else
                    Enclosure
                #end
                    
                </label>
                <input id="attachment2" type="hidden" name="attachment"/>
                <div id="uploader1">
                    <span class="btn btn-block btn-primary fileinput-button" style="width: 120px">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>
                            
                            #if(C.get('language')=='ch')
                                选择文件
                            #else
                                Select File...
                            #end
                            
                        </span>
                        <input id="cfile1" type="file" name="files[]" multiple>
                    </span>
                    <div class="myPanel">
                        
                        #if(C.get('language')=='ch')
                            或者拖动文件到这里进行上传...
                        #else
                            Or drag the file here to upload
                        #end    
                        
                    </div>
                    <div style="color: #ccc;">
                        #if(C.get('language')=='ch')
                            支持所有文本文件
                        #else
                            Support for all text files
                        #end
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">
                    
                    #if(C.get('language')=='ch')
                        发布内容
                    #else
                        content
                    #end 
                    <span class="red">*</span>
                </label>
                <textarea maxlength='1000' class="form-control" rows="5" id="content1" name="content" required="required"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                #if(C.get('language')=='ch')
                    关闭
                #else
                    Close
                #end
            </button>
            <button type="button" class="btn btn-primary" onclick="submitinteract();" style="margin-top: 4px;">
                #if(C.get('language')=='ch')
                    提交
                #else
                    Submit
                #end
            </button>
            
          </div>
          <div class="modal-footer">
                #if(C.get('language')=='ch')
                提示：
                #else
                Note：
                #end
                <br/>
                <span style="color: #17a2b8;">
                    #if(C.get('language')=='ch')
                        留言最多为1000个字.
                    #else
                         Please limit your description to 1000 characters
                    #end
                </span>
            </div>
        </div>
      </div>
    </div>
    
    
    <script>
	$('#cfile').fileupload({
		dropZone: $('#uploader'),
		url: '#(CPATH)/commons/attachment/upload',
		sequentialUploads: true,
		progressall: function (e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$(".myPanel").text("上传进度：" + progress + "%")
		},
		done: function (e, data) {

			$(".myPanel").text("或者拖动文件到这里进行上传...");

			if(data.result.state == "ok"){
				$("#attachment").val(data.result.src);
				alert("文件上传成功...");
				$("#attachments-a").show();
				$("#attachments-a").attr("href",data.result.src);
				
			}else {
				alert(data.result.message)
			}
		}
	});
	
	$('#cfile1').fileupload({
		dropZone: $('#uploader1'),
		url: '#(CPATH)/commons/attachment/upload',
		sequentialUploads: true,
		progressall: function (e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$(".myPanel").text("上传进度：" + progress + "%")
		},
		done: function (e, data) {

			$(".myPanel").text("或者拖动文件到这里进行上传...");

			if(data.result.state == "ok"){
				$("#attachment2").val(data.result.src);
				alert("文件上传成功...")
				$("#attachments2-a").show();
				$("#attachments2-a").attr("href",data.result.src);
			}else {
				alert(data.result.message)
			}
		}
	});
	
	
	
	$("#attachments-a").hide()
    $("#attachments2-a").hide()
    </script>
    
</body>

</html>